<template>
  <div class="process-container">
    <h2 class="section-title">影视制作全流程</h2>
    <el-timeline>
      <el-timeline-item
          v-for="(step, index) in productionProcess"
          :key="index"
          :timestamp="step.time"
          placement="top"
      >
        <el-card>
          <h4>{{ step.title }}</h4>
          <p>{{ step.content }}</p>
          <div class="step-tags">
            <el-tag
                v-for="(tag, i) in step.tags"
                :key="i"
                :type="tagTypes[i % tagTypes.length]"
                size="small"
            >
              {{ tag }}
            </el-tag>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
const tagTypes = ['', 'success', 'info', 'warning', 'danger']

const productionProcess = [
  {
    time: '前期策划',
    title: '创意孵化阶段',
    content: '包括剧本创作、项目立项、预算评估、团队组建等核心筹备工作',
    tags: ['剧本开发', '项目策划', '资金筹备']
  },
  {
    time: '中期拍摄',
    title: '制作执行阶段',
    content: '现场拍摄、演员调度、场景搭建、设备调试等实际制作过程',
    tags: ['现场拍摄', '设备租赁', '艺人协调']
  },
  {
    time: '后期制作',
    title: '精加工阶段',
    content: '剪辑、特效、配音、调色等后期处理，确保成片质量',
    tags: ['视频剪辑', '特效合成', '音频处理']
  },
  {
    time: '宣发运营',
    title: '市场推广阶段',
    content: '媒体宣传、发行渠道拓展、版权运营等市场化操作',
    tags: ['媒体推广', '版权运营', 'IP衍生']
  }
]
</script>

<style scoped>
.process-container {
  padding: 40px 0;
  max-width: 800px;
  margin: 0 auto;
}

.step-tags {
  margin-top: 10px;
}

.step-tags .el-tag {
  margin-right: 8px;
}
</style>